<template>
  <div class="broadcast">
      <i class="iconfont laba">&#xe617;</i>
      <div v-for="item in listmsg" :key="item.id">
        <Transition
        enter-active-class="animate__animated animate__fadeIn animate__delay-1s"
        leave-active-class="animate__animated animate__fadeOut animate__delay-0.5s"
        >
        <div
        class="content"
        v-show="item.id === this.showid"
        >
          <div class="main" @click="openusercard(item.userid)">{{ item.content }}</div>
          <span class="time">{{day(item.date).locale('zh-cn').fromNow()}}</span>
          <span class="more" @click="gotoSquare()">更多<i class="iconfont">&#xe61f;</i></span>
        </div>
        </Transition>
      </div>
      <!-- 用户信息 -->
      <userDialog
      :show-modal="showUserModal"
      @close="showUserModal = false"
      :userid="userCardid"
      />
  </div>
</template>

<script>
// 引入用户卡组件
import userDialog from '@/views/square/components/userdialog.vue'
import { getbroadcastMessage } from '@/api/comments'
const dayjs = require('dayjs')
const relativeTime = require('dayjs/plugin/relativeTime')
dayjs.extend(relativeTime)
require('dayjs/locale/zh-cn')

export default {
  name: 'broadcast-vue',
  data () {
    return {
      listmsg: [],
      msgnum: 0,
      showid: 0,
      timeInterval: '',
      // 点击播报显示用户基本信息
      // 用户卡片框的显示
      showUserModal: false,
      // 卡片框渲染的用户的id
      userCardid: 0
      // 获取用户数据 从vuex
    }
  },
  components: {
    userDialog
  },
  methods: {
    // 打开用户信息卡
    openusercard (id) {
      this.showUserModal = true
      this.userCardid = id
    },
    gotoSquare () {
      this.$router.push('/Square')
    }
  },
  created () {
    getbroadcastMessage().then((res) => {
      this.listmsg = res.data.listmsg
      this.msgnum = res.data.listmsg.length
      this.showid = res.data.listmsg[0].id
      let count = 0
      this.timeInterval = setInterval(() => {
        this.showid = this.listmsg[count].id
        if (count < this.msgnum - 1) {
          count++
        } else {
          count = 0
        }
      }, 5000)
    })
  },
  unmounted () {
    clearInterval(this.timeInterval)
  }
}
</script>

<style lang="less" scoped>
.broadcast {
  margin: 0 auto;
  position: relative;
  border-radius: 10px;
  width: 700px;
  height: 40px;
  background-color: #bcbcbc4f;
  .laba{
    font-size: 24px;
    position: absolute;
    left: 20px;
    top:4px;
    color: #3e87e5;
  }

  .content {
    display: flex;
    cursor: pointer;
    position: absolute;
    width: 700px;
    text-align: center;
    line-height: 40px;
    .main{
      margin-left: 70px;
      width: 450px;
      overflow:hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow:ellipsis;
      &:hover {
        color: #3e87e5;
      }
    }
    .time {
      cursor:default;
      font-family: '钉钉进步体';
      position: relative;
      left: 50px;
      color: #9d9d9d;
    }
    .more{
      font-size: 10px;
      font-family: '钉钉进步体';
      position: relative;
      left: 70px;
      color: #9d9d9d;
      .iconfont{
        font-size: 10px;
      }
    }
  }

  /* 下面我们会解释这些 class 是做什么的 */
/* .fade-enter-active,
.fade-leave-active {
  transform: translateX(30px);
  transition: all 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
*/
}
</style>
